<template>
    <view class="address-container">
        <!--选择收货地址盒子-->
        <view class="address-choose-box" v-if="JSON.stringify(addressList) === '{}' || cartList.length === 0">
            <button type="primary"  class="address-choose-button" @click="chooseAddress('showLeft')">请选择收货地址
                +
            </button>
        </view>
        <!--收货地址信息盒子-->
        <view class="address-info-box" v-else @click="chooseAddress">
            <!--收货人-->
            <view class="username address">
                <uni-icons type="person" size="20" class="icon" color="#ff93a7"></uni-icons>
                <text>{{ addressList.userName }}</text>
                <uni-icons type="right" class="icons" size="22"></uni-icons>
            </view>
            <!--收货电话-->
            <view class="phone address">
                <uni-icons type="phone" size="20" class="icon" color="#ff93a7"></uni-icons>
                <text>{{ addressList.telNumber }}</text>
            </view>
            <!--收货地址-->
            <view class="delivery-address address">
                <uni-icons type="location" size="20" class="icon" color="#ff93a7"></uni-icons>
                <text>{{
                        addressList.provinceName + addressList.cityName + addressList.countyName + addressList.detailInfo
                    }}
                </text>
            </view>
        </view>
        <!--底部分割线-->
        <view class="footer-split-line">
            <view v-for="item in line" :key="item"></view>
        </view>
    </view>
</template>

<script>
    import {mapState, mapMutations} from "vuex";

    export default {
        data() {
            return {
                line: 10,
            }
        },

        methods: {
            ...mapMutations('user', ['updateAddress']),
            async chooseAddress() {
                // 跳转到收货地址页面，使用微信内置API：uni.chooseAddress()
                const [error, success] = await uni.chooseAddress().catch(err => err)
                if (error === null && success.errMsg === 'chooseAddress:ok') {
                    this.updateAddress(success)
                }
            },
        },
        computed: {
            ...mapState('user', ['addressList']),
            ...mapState('cart', ['cartList'])
        }
    }
</script>

<style lang="scss">
    .address-container {

        .footer-split-line {
            display: flex;
            justify-content: space-between;

            view {
                width: 30px;
                height: 5px;
                transform: skewX(-45deg);
            }

            view:nth-child(odd) {
                background-color: #0e81e9;
            }

            view:nth-child(even) {
                background-color: #e0304f;
            }
        }

        .address-choose-box {
            height: 90px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .address-info-box {
            position: relative;
            padding: 10px 5px;
            font-size: 12px;
            font-weight: bold;

            .username {
                .icons {
                    position: absolute;
                    right: 5px;
                }
            }

            .address {
                display: flex;
                align-items: center;

                .icon {
                    padding-right: 8px;
                }
            }
        }
    }
</style>
